<template>
  <!-- 添加题弹框 -->
  <el-drawer
    ref="drawer"
    :title="label + '判断题'"
    size="39%"
    :visible.sync="dialog"
    label="rtl"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        class="item"
        :rules="rules"
      >
        <el-form-item label="题库" prop="category">
          <!-- 选择题库 -->
          <el-select
            v-model="form.category"
            class="select"
            placeholder="选择题库"
          >
            <el-option
              v-for="e in categoryOptions"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目" prop="content">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="题解">
          <el-input v-model="form.solution" type="textarea" />
        </el-form-item>
        <div class="box">
          <el-row>
            <el-col :span="8">
              <el-form-item label="答案" prop="answer">
                <el-select
                  v-model="form.answer"
                  placeholder="选择答案"
                  class="select"
                >
                  <el-option
                    v-for="item in answerdata"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分数" prop="score">
                <el-input
                  v-model="form.score"
                  placeholder="请输入分数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="难度" prop="difficulty">
                <el-select
                  v-model="form.difficulty"
                  placeholder="选择难度"
                  class="select"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { pushsaveList, CompileUpdate } from '@/api/ts/question.js'
export default {
  props: ['dialogjudge'],
  data() {
    return {
      label: '',
      radio: '1',
      type: '3',
      dialog: false,
      loading: false,
      value: '',
      categoryOptions: [],
      sort: '',
      examinationQuestionId: '',
      difficulty: [
        { value: 1, label: '容易' },
        { value: 2, label: '常规' },
        { value: 3, label: '较难' },
        { value: 4, label: '很难' }
      ],
      answerdata: [
        { value: 'A', label: '正确' },
        { value: 'B', label: '错误' }
      ],
      form: {
        category: '',
        content: '',
        solution: '',
        score: 1,
        answer: '',
        difficulty: 1,
        options: [
          { opt: 'A', content: '' },
          { opt: 'B', content: '' }
        ]
      },
      rules: {
        content: [
          { required: true, message: '输入内容不可为空', trigger: 'blur' }
        ],
        options: [
          { required: true, message: '输入选项不可为空', trigger: 'blur' }
        ],
        answer: [{ required: true, message: '请选择答案', trigger: 'change' }],
        score: [
          { required: true, message: '请输入分数', trigger: 'change' },
          { pattern: /^[1-9][0-9]{0,1}$/, message: '请输1-99之间的正整数', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        category: [{ required: true, message: '请选择题库', trigger: 'change' }]
      },
      formLabelWidth: '80px',
      timer: null
    }
  },
  watch: {
    dialogjudge(val) {
      this.dialog = val.dialogjudge
      this.categoryOptions = val.categoryOptions
      this.label = val.label
      this.sort = val.sort
      this.examinationQuestionId = val.examinationQuestionId
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      if (val.sort === '1') {
        Object.assign(this.$data.form, this.$options.data().form)
      } else if (val.sort === '2') {
        this.form = val.form
      }
    }
  },
  mounted() {
    this.dialogjudge
  },
  methods: {
    fillin() {
      this.dialog = true
    },
    // 确定提交
    handleClose(done) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.sort === '1') {
            this.pushsaveList()
          } else if (this.sort === '2') {
            this.CompileUpdate()
          }
          this.dialog = false
        } else {
          this.$message.error({
            message: '输入内容不可为空'
          })
        }
      })
    },
    cancelForm() {
      this.dialog = false
      clearTimeout(this.timer)
    },
    // 保存请求
    async pushsaveList() {
      let formdata = {
        category: this.form.category,
        type: this.type,
        difficulty: this.form.difficulty,
        content: this.form.content,
        answer: this.form.answer,
        score: this.form.score,
        solution: this.form.solution,
        options: [
          {
            opt: 'A',
            content: '正确'
          },
          {
            opt: 'B',
            content: '错误'
          }
        ]
      }
      try {
        let data = await pushsaveList(formdata)
        if (data.code == 1) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          Object.assign(this.$data, this.$options.data())
        }
        this.$parent.getList()
      } catch (error) {
        //
      }
    },
    async CompileUpdate() {
      let formdata = {
        category: this.form.category,
        type: this.type,
        difficulty: this.form.difficulty,
        content: this.form.content,
        answer: this.form.answer,
        score: this.form.score,
        solution: this.form.solution,
        options: this.form.options,
        examinationQuestionId: this.examinationQuestionId
      }
      try {
        let data = await CompileUpdate(formdata)
        if (data.code == 1) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
        }
        this.$parent.getList()
      } catch (error) {
        //
      }
    }
  }
}
</script>

<style scoped lang='scss'>
:focus {
  outline: 0;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
}
.demo-drawer__footer {
  text-align: right;
  margin-top: 50px;
  padding: 0 20px;
}
.el-form-item {
  margin-bottom: 20px !important ;
}
</style>>
